<template>
  <input type="text" v-model="data.str">
  <div><span>str:</span>{{ data.str }}</div>
  <div><span>unicode:</span>{{ data.code0 }}</div>
  <div><span>hexcode:</span>{{ data.code1 }}</div>
</template>

<script setup lang="ts">
import { reactive,watch } from "vue";
const data = reactive({
  str:'',
  code0:0,
  code1:''
})
data.str = '好'
function func() {
  console.log('func');
  let unicode = data.str.charCodeAt(0)
  let hexcode = unicode.toString(16)
  data.code0 = unicode
  data.code1 = hexcode
}
func()
watch(()=>data.str,()=>{
  func()
})
</script>

<style lang="less" scoped>
div{
  min-width: 300px;
  text-align: left;
  span{
    display: inline-block;
    min-width: 100px;
  }
}
input{
  min-width: 300px;
  text-align: center;
}
</style>